<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="../dist//vue.js"></script>
    
    <!-- 我们可以给模版中的属性增加一个收集器-dep 页面渲染的时候 我们将渲染逻辑封装到watcher中 vm._update(vm._render()); 让dep记住这个watcher即可 稍候属性变化了可以找到对应的dep中存放的watcher进行重新渲染 -->
    <div id="app">
        <span><a href="">{{name}}</a></span>
    </div>
    <script>
        //实现diff算法
        //在之前的更新中，每次更新都会产生新的虚拟节点，通过新的虚拟节点生成真实节点，生成后替换掉老的节点
        //第一次渲染的时候我们会产生新的虚拟节点，第二次更新我们也会调用render方法产生新的虚拟节点，对比出需要更新部分内容
        const vm = new Vue({
            el: "#app",
            data:{
                name:'zf'
            }
        })
        setTimeout(()=>{
            vm.name='1'
        },1000)
    </script>

</body>
</html>